<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        px像素
        rem 根据 根字体大小决定
        em 相对于父节点
        vw
        vh
        vmin
        vmax -->
        <style>
            html{
                /* 根root 字体默认大小是16px */
                font-size: 16px;
            }
            body{
                font-size: 10px;
            }
            .bigbox{
                font-size: 50px;
            }
            .box{
                /* 16*10=160px */
                /* height: 10rem; */
                /* width: 10rem; */
                background-color: orange;
                /* em找亲父亲(就近原则),亲夫亲是body,而body继承html 20px */
                /* 10*50=500px */
                height: 10em;
                width: 10em;
            }
        </style>
</head>
<body>
    <div class="bigbox">
    <div class="box">
        你好!
    </div>
    </div>
</body>
</html>